<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YqWinPlus ES模块测试</title>
  <!-- 引入 Element Plus CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@2.12.0/dist/index.css">
  <!-- 引入 YQWIN-Plus CSS -->
  <link rel="stylesheet" href="/dist/yqwin-plus.css">
  
  <!-- 使用importmap帮助浏览器解析模块导入 -->
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.3.13/dist/vue.esm-browser.prod.js",
        "element-plus": "https://unpkg.com/element-plus@2.12.0/dist/index.full.mjs",
        "yqwin-plus": "/dist/yqwin-plus.es.js"
      }
    }
  </script>
</head>
<body>
  <div id="app"></div>

  <!-- 引入 Vue -->
  <script type="module">
    // 使用与组件库兼容的Vue版本
    import { createApp, h } from 'vue';
    // 引入Element Plus
    import ElementPlus from 'element-plus';
    // 引入我们的组件库
    import YqWinPlus from 'yqwin-plus';

    // 创建Vue应用
    const app = createApp({
      data() {
        return {
          selectedValue: ''
        }
      },
      render() {
        return h('div', {}, [
          h('h1', {}, 'YqWinPlus ES模块测试'),
          h('p', {}, '使用 ES 模块方式引入 YQWIN-Plus 组件库'),
          h('div', { class: 'test-section' }, [
            h('h2', {}, '基础用法'),
            h('yq-select', {
              modelValue: this.selectedValue,
              'onUpdate:modelValue': (value) => this.selectedValue = value,
              placeholder: '请选择选项'
            }, {
              default: () => [
                h('yq-option', { label: '选项1', value: 'option1' }),
                h('yq-option', { label: '选项2', value: 'option2' }),
                h('yq-option', { label: '选项3', value: 'option3' })
              ]
            }),
            h('p', {}, `选中值: ${this.selectedValue}`)
          ])
        ]);
      }
    });

    // 使用Element Plus
    app.use(ElementPlus);
    // 使用我们的组件库
    app.use(YqWinPlus);

    // 挂载应用
    app.mount('#app');
  </script>
</body>
</html>